import {
	observer
} from 'mobx-react';
import {
	WeaDatePicker
} from "ecCom";

@observer
export default class SearchCondition extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			store,
		} = this.props, {
			searchCondition,
			SEARCHCONDITION
		} = store, {
			datePickerValue,
			currentKey,
		} = searchCondition, {
			onTabChange,
			searchConditionTabs,
			handleDatePickerChange,
			resetSearchCondition,
		} = SEARCHCONDITION;

		return (
			<div className='search-condition'>
				<div className='tab'>
					{
						searchConditionTabs.map( data => {
							const {key,title}  = data;
							return (
								<span onClick={() => onTabChange(key)} className={ `${(currentKey ===key) && 'blue'} hover`  }>{title}</span>
							)
						})
					}
				</div>
				<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@a3fbgc`}
		          arrow
		          type={currentKey === '0' ? 'year' : 'month'}
		          date={datePickerValue}
		          onChange={handleDatePickerChange}
		        />
		        <span onClick={resetSearchCondition} className='refresh'>
		        	<i className='icon-coms-Refresh' />
		        </span>
			</div>
		);
	}
}